/**
* 弹窗组件，使用： this.$store.dispatch('setModal',{visible:true，modalId:'modlaId',callback:function(response){}});
*/
<template>
  <transition name="slide-fade">
    <div v-if="modal.visible && modal.modalId=='subscribePriceModal'" class="modal" id="subscribePriceModal"
         tabindex="-1" @click.stop.prevent="modalHide">
      <div class="modal-dialog" @click.stop.prevent>
        <div class="modal-content">
          <img src="~assets/images/tankuang-l@2x.png" class="img-responsive">
          <img src="~assets/images/close@2x.png" data-dismiss="modal" class="img-close" @click.stop.prevent="modalHide">
          <div class="oxhead">
            <img src="https://dl.app.gtja.com/nrng/shareimages/oxhead/niudengpao.png">
          </div>
          <div class="wrapper">
            <h4><span>设置订阅价格</span></h4>
            <p style="border-bottom: 1px dashed #999999;padding-bottom:10px;">人人在投资上都有思维禁区，所以他们需要通过订阅你来看到你的第一手调仓操作，当然不是免费的啦。
              设置一个合理的价格可以让你赚取君元宝的同时让别人也学习到你的投资思维呢~</p>
            <div class="slider_box" ref="slider_box">
                <div class="slider_tip" ref="slider_tip" :style="{left:'-20px'}">{{subscribePrice}}</div>
                <div class="slider_track" ref="slider_track">
                    <div class="slider_selection" ref="slider_selection" :style="{width:'0px'}"></div>
                </div>
                <div class="slider_handle" ref="slider_handle" :style="{width:'20px',left:'-10px'}"></div>
            </div>
            <div class="clearfix">
              <p class="pull-left">0 君元宝/人</p>
              <p class="pull-right">1000 君元宝/人</p>
            </div>
            <div class="tips">大王，小的提醒您太高的价格会吓跑群众哦~</div>
            <button type="button" class="btn btn-lg btn-agree" @click.stop.prevent="setSubscribePrice">确认</button>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
    import BaseModal from 'components/modal/BaseModal'
    import RemoteDAO from 'common/remoteDAO'
    import LocalDAO from 'common/localDAO'
    import _ from 'underscore'

    export default {
        data () {
            return {
                subscribePrice: LocalDAO.getSubscribePrice()
            }
        },
        extends: BaseModal,
        methods:{
            //修改订阅价格
            setSubscribePrice () {
                var self = this;
                var args = {};
                args.USER_CODE = LocalDAO.getUserCode();
                args.IS_AUDIT = "0";
                args.USER_HEAD = "";
                args.NICKNAME = "";
                args.BUSIN_TYPE = "NRNG";
                args.SUBSCRIBE_PRICE = self.subscribePrice;
                args.ACTIVITY_CODE  = "";
                RemoteDAO.callUC12000103(args, function(response) {
                    if (response.error == "0") {
                        LocalDAO.setSubscribePrice(args.SUBSCRIBE_PRICE);
                        if (_.isFunction(self.modal.callback)) {
                            self.modal.callback({error:0,subscribePrice:args.SUBSCRIBE_PRICE});
                        }
                        self.modalHide();
                    } else {
                        self.$store.dispatch('setTip',{text:response.data});
                    }
                });
            },

            //初始化滑动条
            initSlider () {
                var self = this;
                var slider_box = self.$refs.slider_box;
                var slider_tip = self.$refs.slider_tip;
                var slider_track = self.$refs.slider_track;
                var slider_selection = self.$refs.slider_selection;
                var slider_handle = self.$refs.slider_handle;
                var startX = 0;
                var endX = 0;
                var moveX = 0;
                var startPos = 0;
                var endPos = 0;
                var isTouching = false;
                var handleWidth = parseInt(slider_handle.style.width);
                var trackWidth = parseInt(document.defaultView.getComputedStyle(slider_track).width);
                var tipWidth = slider_tip.getBoundingClientRect().width;
                if(tipWidth < 40){
                    tipWidth = 40
                }
                slider_tip.style.left = self.subscribePrice/1000*trackWidth - tipWidth/2 + 'px';
                slider_handle.style.left = self.subscribePrice/1000*trackWidth - handleWidth/2  + 'px';
                slider_selection.style.width = self.subscribePrice/1000*trackWidth + 'px';

                slider_handle.addEventListener('touchstart',function(e){
                    e.preventDefault();
                    e.stopPropagation();
                    isTouching = true;
                    startX = e.targetTouches[0].clientX;
                    startPos = parseInt(slider_handle.style.left)
                });
                document.addEventListener('touchmove',function(e){
                    if(isTouching){
                        endX = e.targetTouches[0].clientX;
                        moveX = endX - startX;
                        var trackWidth = parseInt(document.defaultView.getComputedStyle(slider_track).width);
                        console.info(trackWidth);
                        if(startPos+moveX+handleWidth/2 <=0){
                            slider_tip.style.left = -slider_tip.getBoundingClientRect().width/2 + 'px';
                            slider_handle.style.left = -handleWidth/2 + 'px';
                            slider_selection.style.width = 0 + 'px';
                            self.subscribePrice = 0;
                        }else if(startPos+moveX+handleWidth/2 >=trackWidth){
                            slider_tip.style.left = trackWidth - slider_tip.getBoundingClientRect().width/2 + 'px';
                            slider_handle.style.left = trackWidth-handleWidth/2 + 'px';
                            slider_selection.style.width = trackWidth + 'px';
                            self.subscribePrice = 1000;
                        }else{
                            endPos = startPos + moveX;
                            slider_tip.style.left = endPos + handleWidth/2 - slider_tip.getBoundingClientRect().width/2 + 'px';
                            slider_handle.style.left = endPos +'px';
                            slider_selection.style.width = endPos + handleWidth/2 +'px';
                            self.subscribePrice = Math.floor(parseInt(slider_selection.style.width)/trackWidth*1000);
                        }
                    }
                });
                document.addEventListener('touchend',function(e){
                    isTouching = false;
                });
                slider_box.addEventListener('touchstart',function(e){
                    e.preventDefault();
                    e.stopPropagation();
                    var boxLeft = slider_box.getBoundingClientRect().left;
                    var trackWidth = parseInt(document.defaultView.getComputedStyle(slider_track).width);
                    slider_handle.style.left = e.targetTouches[0].clientX - boxLeft -handleWidth/2 + 'px';
                    slider_tip.style.left = e.targetTouches[0].clientX - boxLeft - slider_tip.getBoundingClientRect().width/2 + 'px';
                    slider_selection.style.width = e.targetTouches[0].clientX - boxLeft + 'px';
                    self.subscribePrice =Math.floor(parseInt(slider_selection.style.width)/trackWidth*1000);
                    isTouching = true;
                    startX = e.targetTouches[0].clientX;
                    startPos = parseInt(slider_handle.style.left);
                })
            }
        },
        updated () {
            var self = this;
            if (self.$store.state.modal.modalId == 'subscribePriceModal') {
                self.initSlider ();
            }
        }
    }
</script>

<style scoped>
     .slide-fade-enter-active,.slide-fade-leave-active{
       transition: all 0.3s ease;
     }
     .slide-fade-enter, .slide-fade-leave-active {
       transform: translate(0,-25%);
       opacity: 0;
    }
    .slider_box {
        position:relative;
        width:220px;
        height:50px;
        margin:0 auto;
    }
    .slider_box .slider_tip {
        max-width: 200px;
        padding: 3px 8px 3px 25px;
        box-sizing:border-box;
        color: #fff;
        border-radius: 4px;
        white-space: nowrap;
        position:absolute;
        left:-20px;
        background-color: #6FD8FF;
        background-image: url('~assets/images/jun@3x.png');
        background-position: 3px 6px;
        background-size: 20px;
        background-repeat: no-repeat;
        font-size: 12px;
        font-style: normal;
        font-weight: normal;
        letter-spacing: normal;
        line-height: 1.42857143;
        text-shadow: none;
        text-transform: none;
        word-break: normal;
        word-spacing: normal;
        word-wrap: normal;
        text-align:center;
    }
    .slider_box .slider_tip::after {
        content: '';
        display: block;
        width: 0;
        height: 0;
        border: 6px transparent solid;
        border-top-color: #6FD8FF;
        position: absolute;
        left: 50%;
        top: 100%;
        transform:translateX(-50%);
    }
    .slider_box .slider_track {
        width:220px;
        height: 10px;
        border-radius: 10px;
        background: rgba(219, 219, 219, 0.22);
        overflow:hidden;
        position:absolute;
        left:50%;
        top:80%;
        -webkit-transform:translate(-50%,-50%);
    }
    .slider_box .slider_selection {
        width:0;
        height:100%;
        border-radius:4px;
        background:#82D7FF;
    }
    .slider_box .slider_handle {
        width:20px;
        height:20px;
        border-radius:10px;
        background:#82D7FF;
        position:absolute;
        left:-10px;
        top:80%;
        -webkit-transform:translate(0,-50%);
    }
</style>
